<template>
	<div class="role" v-if="taskListVisible">
		<el-dialog :title="title" :visible="taskListVisible" :close-on-click-modal="false" width="1200px" top="5vh" :before-close="handleClose" append-to-body>
			<div>
				<el-card class="box-card" >
					<div class="caseContent" @click="caseShow">
						<el-form ref="form" :model="form" label-width="110px">
							<el-row>
								<el-col>
									<el-form-item label="用例名称：">
										{{form.case['case_name']}}
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="12">
								<el-col :span="12">
									<el-form-item label="测试优先级：">
										<el-tag type="warning">{{form.case.priority}}</el-tag>
									</el-form-item>
								</el-col><el-col :span="12">
								<el-form-item label="测试模块：">
									{{form.case.test_module}}
								</el-form-item>
							</el-col>

							</el-row>
						</el-form>
					</div>
					<div class="box" v-if="!caseContent">
					</div>
					<div class="caseMessage" v-if="caseContent">
						<el-form ref="form" :model="form" label-width="110px">
							<el-row :gutter="12">
								<el-col :span="8">
									<el-form-item label="测试人员：">
										{{getUpdate(form.tester_show)}}
									</el-form-item>
									<el-form-item label="更新人：">
										{{getUpdate(form.updated_by)}}
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="测试类型：">
										{{form.case.test_type}}
									</el-form-item>
									<el-form-item label="测试状态：">
										<el-tag v-if="form.status == 0">{{form.status_show}}</el-tag>
										<el-tag v-if="form.status == 1" type="success">{{form.status_show}}</el-tag>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="测试结果：">
										<el-tag v-if="form.result == 'Pass'" type="success">{{form.result}}</el-tag>
										<el-tag v-if="form.result != 'Pass' && form.result != null" type="danger">{{form.result}}</el-tag>
										<el-tag v-if="form.result == null" type="success">暂 无</el-tag>
									</el-form-item>
									<el-form-item label="更新时间：">
										{{getTime(form.update_time)}}
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col>
									<el-form-item label="测试结果备注：">
										{{form.remark}}
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-card>
			</div>
			<div class="content">
				<div class="item">
					<el-card class="box-card" >
						<div slot="header" class="clearfix">
							<span>测试用例详情</span>
						</div>
						<div class="tab" style="height: 448px;overflow-x: hidden;overflow-y: auto;">
							<el-form ref="form" :model="form" label-width="110px">
								<el-row>
									<el-col>
										<el-form-item label="测试前提：">
											<span style="white-space: pre-wrap;">{{form.case.test_premise}}</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col>
										<el-form-item label="测试步骤：">
											<span style="white-space: pre-wrap;">{{form.case.test_step}}</span>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col>
										<el-form-item label="预期结果：">
											<span style="white-space: pre-wrap;" >{{form.case.expect}}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</el-card>
				</div>
				<div class="item">
					<el-card class="box-card" >
						<div slot="header" class="clearfix">
							<span>测试用例结果填写</span>
						</div>
						<div class="tab" style="height: 448px;">
							<el-form ref="resultForm" :rules="resultRules" :model="resultForm" label-width="80px">
								<el-form-item label="测试结果" prop="result">
									<el-radio-group v-model="resultForm.result">
										<el-radio label="Pass"></el-radio>
										<el-radio label="Fail"></el-radio>
										<el-radio label="Block"></el-radio>
										<el-radio label="Skip"></el-radio>
										<el-radio label="N/A"></el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="备注" prop="remark" :rules="resultForm.result != 'Pass' ? resultRules.remark : [{required: false}]">
									<el-input v-model="resultForm.remark" :rows="6" type="textarea" placeholder="请输入备注"></el-input>
								</el-form-item>
							</el-form>
						</div>

					</el-card>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button  @click="addResult('resultForm')" type="primary">提交结果</el-button>
				<el-button @click="nextCase" type="success">下一条</el-button>
				<el-button @click="handleClose">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<script>
import { taskCaseGet,taskCasePost,taskId } from '@/api/user'
export default {
	name: 'addForm',
	components: {
	},
	data() {
		return {
			activeName:'first',
			title:'测试样例',
			taskListVisible:false,
			form:{
				case:{
					case_name:'',
					priority:'',
					test_type:'',
					updated_by:'',
					test_module:'',
					expect:'',
					test_step:'',
					test_premise:''
				}
			},
			resultForm:{},
			resultRules:{
				result:{required: true, message: '请选择测试结果', trigger: 'change' },
				remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
			},
			id:'',
			fatherId:'',
			caseList:[],  // 用例列表
			caseIndex:0,
			caseContent:false
		}
	},
	methods:{
		// 展示用例详情
		caseShow(){
			this.caseContent = !this.caseContent
		},
		// 下一条用例
		nextCase(){
			if(this.caseIndex < this.caseList.length){
				this.caseList.forEach((item,index) => {
					if(item.case.id == this.form.case.id){
						this.caseIndex = index + 1
						this.id = this.caseList[index+1].id
						this.$nextTick(() => {
							this.form = Object.assign({}, this.caseList[index+1])
							this.resultForm = Object.assign({},this.caseList[index+1])
						})
					}
				})
			}else {
				this.$message.error('已经是最后一条了!')
			}
		},
		// 提交测试结果
		addResult(resultForm){
			this.$refs[resultForm].validate((valid) => {
				let obj = {
					result:this.resultForm.result,
					remark:this.resultForm.remark
				}
				if (valid) {
					taskCasePost(obj,this.id).then(res => {
						if(res.status == 'success'){
							// this.taskListVisible = false
							this.$message.success('填写成功！')
							this.$emit('func',this.fatherId)
						} else if(res.code == 403){
							this.$message.error('无权限操作！')
						} else {
							this.$message.error('填写错误！')
							this.taskListVisible = false
						}
					})
				} else {
					return false;
				}
			})
		},
		handleClose(){
			this.taskListVisible = false
		},
		initData(data,id){
			this.id = data.id
			this.fatherId = id
			taskCaseGet(data.id).then(res => {
				this.form = Object.assign({},res.data)
			})
			taskId(id).then(res => {
				console.log(res.data.task_case,1111111)
				this.caseList = res.data.task_case
				this.caseList.forEach((item,index) => {
					if(item.case.id == this.form.case.id){
						this.caseIndex = index
					}
				})
			})
			this.resultForm = Object.assign({},data)
		},
		getTime(data){
			var d = new Date(data);
			var d2 = d.getTime() - 8 * 60 * 60 * 1000
			d = new Date(d2)
			var  resDate = d.getFullYear() + '-' +
				((d.getMonth() + 1)<10?'0'+(d.getMonth() + 1):(d.getMonth() + 1)) + '-' +
				(d.getDate()<10?'0'+d.getDate():d.getDate())+ ' '+
				(d.getHours()<10?'0'+d.getHours():d.getHours())+':'+
				(d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes())+':'+
				(d.getSeconds()<10?'0'+d.getSeconds():d.getSeconds());
			return resDate
		},
		getUpdate(data){
			if(data){
				return data['name']
			}else {
				return '暂无'
			}
		},
		getTester(data){
			if(data){
				return data['name']
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.tab{

}
.box {
	margin: 0 auto;
	width: 0px;
	height: 0px;
	border-top: 10px solid #ccc;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.title{
	font-size: 15px;
	font-weight: 600;
	background-color: #eee;
	padding: 5px;
}
.caseContent{
	cursor: pointer;
}
.content{
	display: flex;
	.item{
		width: 50%;
	}
}
/*滚动条样式*/
.tab::-webkit-scrollbar {
	width: 4px;
	/*height: 4px;*/
}
.tab::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background: rgba(0,0,0,0.2);
}
.tab::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	border-radius: 0;
	background: rgba(0,0,0,0.1);

}
</style>
